<template>
    <div class="payment w">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>支付宝支付</span>
            </div>
            <div class="images-qr">
                <span class="qr-title">请使用支付宝沙箱版进行支付</span>
                <img class="qr-con" v-lazy="resData.qrUrl" alt="支付宝支付">
            </div>
        </el-card>
    </div>
</template>

<script>
import MyHeader from "@/components/Header";
import MyFooter from "@/components/Footer";
import Tips from "@/utils/tipsUtil";
import Pay from "@/service/pay-service";
const _tips = new Tips();
const _pay = new Pay();
export default {
  data() {
    return {
      pageData: {
        orderNo: null
      },
      resData: {
        qrUrl: null,
        orderNo: null
      }
    };
  },
  components: {},
  mounted() {
    //取出路由上的从注册跳转过来的用户名
    this.pageData.orderNo = this.$route.query.orderNo || "";
    this.init();
  },
  methods: {
    /**
     * 初始化
     
     */
    init() {
      const vue = this;
      const orderNo = vue.pageData.orderNo;
      if (orderNo) {
        _pay.pay(orderNo).then(
          res => {
            vue.resData.qrUrl = res.data.qrUrl;
            vue.resData.orderNo = res.data.orderNo;
            //todo 怎么停止这个定时器
           // vue.listenOrderStatus();
          },
          err => {
            _tips.notifyTips(vue, err.msg);
          }
        );
      } else {
        _tips.notifyTips(vue, "获取订单号为空");
      }
    },

    /**
     * 定时器检查是否已经付款成功
     */
    listenOrderStatus() {
      const vue = this;
      window.setInterval(function() {
        const orderNo = vue.resData.orderNo;
        if (orderNo) {
          _pay.queryOrderStatus(orderNo).then(
            res => {
              if (res.data) {
                vue.$router.push({ path: "/orders" });
              }
            },
            err => {}
          );
        }
      }, 5e3);
    }
  }
};
</script>

<style scoped lang="scss">
.images-qr {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  background: #fff;
  margin-bottom: 50px;
  .qr-title {
    font-size: 18px;
    font-weight: bold;
    color: #666;
    text-align: center;
  }
  .qr-con {
    margin-top: 10px;
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
  }
}
</style>
